<template>
  <!-- 系统账单管理 -->
  <div>
    <br />
    <!-- 头部 -->
    <div class="header">
      <!-- 日期选择器 -->
      <div class="block">
        <!-- <span class="demonstration">带快捷选项</span> -->
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <!-- 选择类型 -->
      <el-select v-model="sentData.type" clearable placeholder="请选择类型">
        <el-option label="充值" value="充值"> </el-option>
        <el-option label="消费" value="消费"> </el-option>
      </el-select>
      <!-- 选择状态 -->
      <el-select v-model="sentData.status" clearable placeholder="请选择状态">
        <el-option label="正常" value="正常"> </el-option>
        <el-option label="未审核" value="未审核"> </el-option>
      </el-select>
      <!-- 查询button -->
      <el-button type="primary" @click="btnQuery">查询</el-button>
    </div>
    <!-- 表格 -->
    <div class="content">
      <!-- 编号 -->
      <el-table :data="billData" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="150"> </el-table-column>
        <!-- 交易金额 -->
        <el-table-column prop="transferMoney" label="交易金额" align="center">
        </el-table-column>
        <!-- 交易时间 -->
        <el-table-column label="交易时间" align="center">
          <template slot-scope="scope">
            <span>{{
              new Date(parseInt(scope.row.transferTime))
                .toLocaleString()
                .replace(/:\d{1,2}$/, " ")
            }}</span>
          </template>
        </el-table-column>
        <!-- 交易类型 -->
        <el-table-column prop="type" label="交易类型" align="center">
        </el-table-column>
        <!-- 状态 -->
        <el-table-column prop="status" label="状态" align="center">
        </el-table-column>
        <!-- 描述 -->
        <el-table-column prop="description" label="描述" align="center">
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页栏 -->
    <div class="footer">
      <div class="paginetion">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="sentData.page"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="sentData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      custNo: "",
      // 选择类型
      conType: "",
      // 选择状态
      // 账单
      billData: [],
      // 查询对象
      sentData: {
        page: 1,
        pageSize: 6,
        status: "",
        type: "",
        beginTime: "",
        endTime: "",
      },
      total:0
    };
  },
  computed: {},
  methods: {
    handleSizeChange(val) {
      this.sentData.pageSize = val;
      this.sentData.page = 1;
      this.getBillData();
    },
    handleCurrentChange(val) {
      this.sentData.page = val;
      this.getBillData();
    },
    btnQuery() {
      if (this.value2 != null) {
        this.sentData.beginTime = this.value2[0];
        this.sentData.endTime = this.value2[1];
      }
      this.getBillData();
      // console.log(typeof(this.value2[1]));
      // console.log(this.value2[1]);
      // var data = new Date();
      // data = this.value2[1]
      // console.log(Date.parse(this.value2[0]));
      // console.log(Date.parse(this.value2[1]));
    },
    async getBillData() {
      if(this.value2 == null) {
        delete this.sentData.beginTime
        delete this.sentData.endTime
      }
      for (const key in this.sentData) {
        if (!this.sentData[key]) {
          delete this.sentData[key];
        }
      }
      let res = await get("/account/pageQuerySystemAccount", this.sentData);
      this.total = res.data.total
      this.billData = res.data.list;
    },
  },
  created() {
    this.getBillData();
  },
  mounted() {},
};
</script>
<style scoped>
.header div {
  float: left;
  margin-right: 10px;
}
/* content样式 */
.content {
  margin-top: 20px;
}
.paginetion {
  position: fixed;
  bottom: 40px;
  right: 20px;
}
</style>